<template>
  <div class="container">
    <!-- 头部 -->
    <el-container class="scound">
      <el-header class="header">
        <div class="proname">良友智造系统</div>
        <div class="righthead">
          <span>{{ nowTime }}</span> &nbsp;
          <span>当前操作人：{{ store.state.name }}</span> &nbsp;
          <button @click="goout">退出</button>
          <i class="el-icon-delete"></i>
        </div>
      </el-header>
      <el-container class="asidecon">
        <!-- 侧边栏 -->
        <el-aside width="200px" class="asideself">
          <el-scrollbar style="width:100%; height:100%">
            <el-menu
                unique-opened
                :default-active="path"
                background-color="#135B94"
                text-color="#fff"
                active-text-color="#ffd04b"
                router>
              <el-sub-menu :index="index + 2" v-for="(item, index) in menuList" :key="item.fmodulekey + ''">
                <template #title>
                  <el-icon>
                    <Menu/>
                  </el-icon>
                  <span>{{ item.fmodulename }}</span>
                </template>
                <el-menu-item :index="item2.fmodulekey" v-for="item2 in item.children"
                              :key="item2.fmodulekey">
                  {{ item2.fmodulename }}
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
            <!--            <el-menu-->
            <!--                unique-opened-->
            <!--                :default-active="path"-->
            <!--                background-color="#135B94"-->
            <!--                text-color="#fff"-->
            <!--                active-text-color="#ffd04b"-->
            <!--                router-->
            <!--            >-->
            <!--              <el-sub-menu index="2">-->
            <!--                <template #title>-->
            <!--                  <el-icon>-->
            <!--                    <Menu/>-->
            <!--                  </el-icon>-->
            <!--                  <span>系统管理</span>-->
            <!--                </template>-->
            <!--                <el-menu-item index="organization">组织机构</el-menu-item>-->
            <!--                <el-menu-item index="userinfo">系统用户</el-menu-item>-->
            <!--                <el-menu-item index="onlineinfo">在线用户</el-menu-item>-->
            <!--                <el-menu-item index="empinfo">职员信息</el-menu-item>-->
            <!--                <el-menu-item index="sysrole">系统角色</el-menu-item>-->
            <!--                <el-menu-item index="loginfo">操作日志</el-menu-item>-->
            <!--              </el-sub-menu>-->
            <!--              <el-sub-menu index="3">-->
            <!--                <template #title>-->
            <!--                  <el-icon>-->
            <!--                    <Menu/>-->
            <!--                  </el-icon>-->
            <!--                  <span>基本信息</span>-->
            <!--                </template>-->
            <!--                <el-menu-item index="category">字典类别</el-menu-item>-->
            <!--                <el-menu-item index="message">字典信息</el-menu-item>-->
            <!--                <el-menu-item index="Works">工段信息</el-menu-item>-->
            <!--                <el-menu-item index="Process">工序信息</el-menu-item>-->
            <!--              </el-sub-menu>-->
            <!--              <el-sub-menu index="4">-->
            <!--                <template #title>-->
            <!--                  <el-icon>-->
            <!--                    <Menu/>-->
            <!--                  </el-icon>-->
            <!--                  <span>销售管理系统</span>-->
            <!--                </template>-->
            <!--                <el-menu-item index="SaleOrder">销售单管理</el-menu-item>-->
            <!--              </el-sub-menu>-->
            <!--              <el-sub-menu index="5">-->
            <!--                <template #title>-->
            <!--                  <el-icon>-->
            <!--                    <Menu/>-->
            <!--                  </el-icon>-->
            <!--                  <span>生产管理系统</span>-->
            <!--                </template>-->
            <!--                <el-menu-item index="ProductSerialNumber">产品序号维护</el-menu-item>-->
            <!--                <el-menu-item index="WorkOrdermaintenance">产品工单物料维护</el-menu-item>-->
            <!--                <el-menu-item index="ProcessMaintenance">产品工单工艺维护</el-menu-item>-->
            <!--                <el-menu-item index="ProcessManagement">工单工序管理</el-menu-item>-->
            <!--                <el-menu-item index="ProcessMaintenanceManagement">工艺维护管理</el-menu-item>-->
            <!--                <el-menu-item index="QualityControl">工序质检管理</el-menu-item>-->
            <!--                <el-menu-item index="test">测试工序</el-menu-item>-->
            <!--              </el-sub-menu>-->
            <!--              <el-sub-menu index="6">-->
            <!--                <template #title>-->
            <!--                  <el-icon>-->
            <!--                    <Menu/>-->
            <!--                  </el-icon>-->
            <!--                  <span>采购管理系统</span>-->
            <!--                </template>-->
            <!--                <el-menu-item index="Delivery">采购到货</el-menu-item>-->
            <!--              </el-sub-menu>-->
            <!--            </el-menu>-->
          </el-scrollbar>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {Menu, Help, Share} from "@element-plus/icons-vue";
import {ref} from "@vue/reactivity";

import {useRoute} from "vue-router";
import {useStore} from "vuex";
import router from "@/router";
import {onMounted} from "@vue/runtime-core";

export default {
  components: {Menu, Help, Share},
  setup() {
    onMounted(() => {
      getnowTime();
      const per = JSON.parse(sessionStorage.getItem("vue3_persistedstate"));
      menuList.value = (per.permission.menulist).reverse();
      router.push({path: "/Home/" + menuList.value[0].children[0].fmodulekey});
    });
    const menuList = ref();
    const nowTime = ref("");
    const store = useStore();
    let route = useRoute();
    let path = route.path.split("/")[2];

    const getnowTime = () => {
      let data = new Date();
      const y = data.getFullYear();
      const m = data.getMonth() + 1;
      const d = data.getDate();
      nowTime.value = y + "/" + m + "/" + d;
    };

    const goout = () => {
      // sessionStorage.setItem('token','')
      // store.commit('updatename','')
      // sessionStorage.setItem('name','')
      sessionStorage.clear();
      router.push("/");
    };

    return {path, store, goout, getnowTime, nowTime, menuList};
  },
};
</script>

<style lang="scss" scoped>
.container {
  // padding: 0;
  // margin: 0;
  // width: 100vw;
  // height: 100vh;
  .el-main {
    padding: 0;
  }

  .scound {
    // height: 100vh;

    .header {
      height: 8vh;
      background-color: rgb(23, 137, 221);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .proname {
        font-size: 1.5rem;
      }

      .righthead {
        button {
          padding: 2px 7px;
          border: 1px solid gray;
          border-radius: 4px;
        }
      }
    }

    .asidecon {
      // height: 100%;
      background-color: #ddd;

      .asideself {
        height: 92vh;
        background-color: #135b94;
        overflow: hidden;
      }
    }
  }
}
</style>
